<template>
    <div class="wrap">
        <div class="item1">
            <div class="d1">余额 :</div>
            <div class="d2">{{userInfo.diamond}}颗</div>
        </div>
        <div class="item2">
            <div class="d1">充值金额 :</div>
            <div class="d2">
                <ul class="m flex">
                    <li v-for="(i, index) in list" :key=index class="item" :class="{'choose': cur==index}" @click="changeMoney(i.money, index)">
                        <p class="p1">
                            {{i.money}}元
                        </p>
                        <P class="p2">
                            {{i.name}}
                        </P>
                    </li>
                </ul>
                <input class="input" v-model="m" :class="{'choose': cur=='null'}" type="number" placeholder="自定义金额"
                    @focus="cur='null';money=m?m:''">
            </div>
        </div>
        <div class="pay">
            <div class="d1">
                充值方式 :
            </div>
            <div class="pay_style d2">
                <span class="item" :class="{'choose': pay_id==1}" @click="pay_id=1">
                    <img width=21 src=""
                        alt="">
                    <span>支付宝</span>
                </span>
                <span class="item" style="margin-left: 30px;" :class="{'choose': pay_id==2}" @click="pay_id=2">
                    <img width=21 src=""
                        alt="">
                    <span>微信</span>
                </span>
                <span class="item item2" style="margin-left: 30px;" :class="{'choose': pay_id==3}" @click="pay_id=3">
                    余额{{balance}}
                </span>
            </div>
            <div>
                <div class="d1">

                </div>
                <div class="send d2" @click="send">
                    立即充值
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        mapState
    } from 'vuex';

    export default {
        data() {
            return {
                pay_id: 1,
                list: {},
                balance: "",
                diamond: "",
                money: '',
                m: '',
                cur: null
            }
        },
        computed: {
            ...mapState(['userInfo'])
        },
        methods: {
            //stype 1是充值余额，2是购买钻石
            chargeRule() {
                this.$http.get('/v1/payment/chargeRule', {
                    params: {
                        stype: 2,
                        qid: 3
                    }
                }).then((data) => {
                    var d = data.data;
                    if (d.code == 200) {
                        this.balance = d.data.balance
                        this.diamond = d.data.diamond
                        this.list = d.data.lists;
                    } else if (d.code == 401) {

                    } else {
                        this.$toast.error(d.message)
                    }
                })
            },
            changeMoney(item, index) {
                if (item == "input") {
                    this.money = this.m;
                    return
                }
                this.cur = index;
                this.money = item;
                this.m = '';
            },
            send() {
                console.log(this.money);
                if (!this.money) {
                    this.$toast.error("请选择或者填写充值金额！");
                    return
                }
                alert("充值接口还没写")
            }
        },
        mounted() {
            console.log("钻石充值")
            this.chargeRule()
        }
    }

</script>
<style lang='scss' scoped>
    .wrap {
        font-size: 14px;

        .m.flex {
            justify-content: flex-start;

        }
    }

    .d1 {
        width: 183px;
        text-align: right;
        color: #666;
        display: inline-block;
    }

    .d2 {
        margin-left: 60px;
        display: inline-block;
        width: 950px;
    }

    .item1 {
        height: 72px;
        line-height: 72px;
        border-bottom: 1px solid #ebebeb;

        .d2 {}
    }

    .item2 {
        border-bottom: 1px solid #ebebeb;

        .d1 {
            float: left;
            margin-top: 40px;
        }

        .d2 {
            padding: 30px 0;

            .input {
                width: 200px;
                height: 50px;
                border: 1px solid rgba(204, 204, 204, 1);
                border-radius: 10px;
                margin-top: 30px;
                text-align: center;
            }

            .input::-webkit-input-placeholder {
                color: #CBCBCB;
                font-size: 14px;
            }
        }
    }

    .pay_style {
        margin-top: 30px;


        .item {
            text-align: center;
            width: 114px;
            height: 50px;
            border: 1px solid rgba(204, 204, 204, 1);
            border-radius: 10px;
            display: inline-block;
            line-height: 50px;
            font-size: 16px;
            cursor: pointer;

            &.choose {
                border: 1px solid rgba(255, 76, 46, 1);

            }
        }
        .item2 {
            width: auto;
            padding: 0 13px;
        }
    }

    .send {
        margin-top: 30px;
        width: 114px;
        height: 50px;
        background: rgba(255, 76, 46, 1);
        border-radius: 10px;
        color: #fff;
        line-height: 50px;
        cursor: pointer;
        text-align: center;
        margin-bottom: 116px;
        font-size: 16px;
    }

    .m {
        &.flex {
            justify-content: space-between;
        }

        li {
            width: 114px;
            height: 50px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid #E0E0E0;
            margin-right: 30px;
            margin-top: 20px;
            cursor: pointer;

            .p1 {
                font-size: 16px;
                color: #656565;
                margin-top: 5px;
            }

            .p2 {
                font-size: 12px;
                color: #999999;
            }

            &.choose {
                border: 1px solid rgba(255, 76, 46, 1);

            }
        }
    }

</style>
